<!DOCTYPE html>
<html>

<head>
    <title>bootstrap</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
    <style type="text/css">
    span {
    	width: 100%;
        display: block;
        color: #FF004B;
        background: #eee;
        height: 50px;
        border: 1px solid #999;
        margin-top: 20px;
        margin-bottom: 10px;
        text-align: center;
    }
    p{
    	color: #FF004B;
    	background: #fff;
    	padding:20px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="row text-danger">
            <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
                <span class="hidden-xs">四栏</span><span class="visible-xs">六栏</span>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
                <span class="hidden-xs">四栏</span><span class="visible-xs">六栏</span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <span class="hidden-xs">四栏</span><span class="visible-xs">十二栏</span>
            </div>
        </div>
        <div class="row text-danger">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <span>三栏</span>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <span>六栏</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <span>三栏</span>
            </div>
        </div>
        <div class="row text-danger">
            <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
                <span class="visible-xs">二栏</span><span class="hidden-xs">一栏</span>
            </div>
            <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
                <span class="visible-xs">二栏</span><span class="hidden-xs">一栏</span>
            </div>
            <div class="col-xs-8 col-sm-2 col-md-2 col-lg-2">
                <span class="visible-xs">八栏</span><span class="hidden-xs">两栏</span>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2">
                <span class="visible-xs">三栏</span><span class="hidden-xs">两栏</span>
            </div>
            <div class="col-xs-3 col-sm-6 col-md-6 col-lg-6">
                <span class="visible-xs">三栏</span><span class="hidden-xs">六栏</span>
            </div>
        </div>
        <div class=" clearfix">
        	
        		<p class="pull-left">边框#999，填充为#eee，边距均为20px，高度均为50px</p>
        	
        </div>
        <div class="clearfix">
        
        		<p class="hidden-xs pull-right">屏幕宽度大于768px时</p>
        		<p class="visible-xs pull-right">屏幕宽度小于于768px时</p>
        	
        </div>
    </div>
</body>

</html>
